<%--
  Created by IntelliJ IDEA.
  User: asus
  Date: 2019/6/21
  Time: 11:01
--%>

<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
</head>

<body>
<div style="width:400px;margin-left:0px ">
    <canvas id="myChart" ></canvas>
</div>
<div style="width:400px;margin-left:600px;margin-top: -200px ">
    <canvas id="myChart2" ></canvas>
</div>
<div style="width:400px;margin-left:0px;">
    <canvas id="myChart3" ></canvas>
</div>
<div style="width:400px;margin-left:600px;margin-top: -200px">
    <canvas id="myChart4" ></canvas>
</div>
</body>
<script src="/sharing/js/chart.min.js"></script>
<script>
    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: ['红', '蓝', '黄', '绿', '紫', '橙'],
            datasets: [{
                label: '示例',
                data: [12, 19, 3, 5, 2, 3],
                borderColor:'blue',
                borderWidth: 1,
                fill: false,
            }]
        },
        options: {
            tooltips: {
                intersect: false,
                mode: 'index'
            }
        }
    });
    var ctx = document.getElementById('myChart2').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['红', '蓝', '黄', '绿', '紫', '橙'],
            datasets: [{
                label: '示例',
                data: [12, 19, 3, 5, 0, 3],
                borderColor:'blue',
                backgroundColor:'skyBlue',
                borderWidth: 1,
            }]
        }
    });
    var ctx = document.getElementById('myChart3').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['红', '蓝', '黄', '绿', '紫', '橙'],
            datasets: [
                {
                    label: '示例1',
                    data: [12, 19, 3, 5, 0, 3],
                    borderColor:'blue',
                    backgroundColor:'skyBlue',
                    borderWidth: 1,
                },
                {
                    label: '示例2',
                    data: [182, 51, 133, 54, 105, 96],
                    borderColor:'red',
                    backgroundColor:'pink',
                    borderWidth: 1,
                },

            ]
        }
    });
    var ctx = document.getElementById('myChart4').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'pie',
        data: {
            labels: ['红', '蓝', '黄', '绿', '紫', '橙'],
            datasets: [{
                label: '示例',
                data: [12, 19, 3, 5, 0, 3],
                borderColor:'lightGray',
                backgroundColor:['pink','skyblue','LightYellow','LawnGreen','MediumPurple','orange'],
                borderWidth: 1
            }]
        }
    });
</script>
</html>